<div class="active-filters flexwrap mv-xs" ng-if="$ctrl.filters.length > 0">
    <span class="mr-xxxs text-muted">{{$ctrl.filters.length}} filter(s) applied:</span>

    <span class="kv-label kv-label-addon mb-xxxs mr-xxxs"
        ng-repeat="filter in $ctrl.filters track by $index">
        <span class="kv-label-key default"><strong>{{filter.field || '???'}}</strong></span>
        <span class="kv-label-val default" uib-tooltip="{{filter.value | filterValue}}" tooltip-placement="top">{{filter.value | filterValue}}</span>

        <span class="default" ng-click="$ctrl.clearItem($index)">
            <i class="filter-close fa fa-times text-danger"></i>
        </span>
    </span>

    <span class="ml-xs">
        <a href ng-click="$ctrl.clearAll()">Clear filters</a>
    </span>

</div>
